<template>
	<view class="popup-box" v-show="isShow">
		<view class="content">
			<view class="head">
				<image class="icon" src="/static/img/common/horn.png"></image>
				<text>提醒</text>
			</view>
			<view class="message" v-html="tipText"></view>

			<view class="buttons">
				<Button3 class="cancel" @click="btnClick(0)">取消</Button3>
				<Button3 @click="btnClick(1)">确认</Button3>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import Button3 from '@/components/button3/button3.vue';
	const emits = defineEmits(['offPopup'])
	// 是否显示
	const isShow = ref(false)
	// 提示文字
	const tipText = ref('')
	// 1--是否需要导航  2--gps检测
	const nowType = ref(1)

	const open = (text : string, type : number) => {
		tipText.value = text;
		nowType.value = type;
		isShow.value = true;
	}
	const close = () => {
		isShow.value = false;
	}
	const btnClick = (type : number) => {
		emits('offPopup', nowType.value, type)
	}
	defineExpose({ open, close })
</script>

<style scoped lang="scss">
	.popup-box {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.content {
		padding: 42rpx 48rpx 48rpx;
		width: 578rpx;
		height: 500rpx;
		font-size: 28rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;

		.head {
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				margin-right: 18rpx;
				width: 74rpx;
				height: 65rpx;
			}
		}

		.message {
			margin: 44rpx 0rpx 72rpx;
			min-height: 140rpx;
			color: #0E1624;
			line-height: 48rpx;
		}


		.buttons {
			display: flex;
			width: 100%;

			.btn {
				flex: 1;
			}

			.cancel {
				margin-right: 16rpx;
			}
		}
	}
</style>